<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>message</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link href="../../css/font-awesome.min.css" rel="stylesheet" />
		<link href="../../css/app.css" rel="stylesheet" />
		<style>
			 .dynamic_images {  
                width: 100%; 
                font-size: 62.5%; 
            } 
            
            .mui-content {
		    	padding-bottom: 50px;
		    } 
              
            .dynamic_images ul {  
                margin: 0;  
                padding: 10px; 
                height:auto;
                overflow: hidden; 
                box-sizing: border-box;
            } 
          
            .dynamic_images ul li {  
               float: left;
                list-style: none;  
                width: calc( 25% - 4px );
              
                /*max-height: 9em;
                max-width:9em;*/
                height: calc(width);
                margin-right: 4px;
                text-align: center;
                position: relative;
                margin-top:2px;
               
  
            }
            
            .dynamic_images .delbtn  {  
 				position:absolute;					
			    height:20px;
			    width:20px;			
			    
			    border-radius: 100px;
			    background-color: #E43400;
			    top: -5px;
			    right:-5px;
			    text-align: center;
			}
			
			
			
			
			.delbtn .deltxt{
				color: #FFFFFF;
				font-size: 20px;
				line-height: 20px;
			}
			 
              
            .dynamic_images ul li img {  
                width: 90%;  
                height: 90%;
               /* max-width: 8.2em;
                max-height: 8.2em;*/
                
            } 
            .image-cover{
            	width:100%;
            	height:100%;
            	background-color:rgba(0, 0, 0, .35);
            	position:absolute;
            	top:0;
            	left:0;
            	
            }
            .image-cover .reload{
            	height:80px;
            	width:80px;
            	position:absolute;
            	top:50%;
            	left:50%;
            	margin-top:-40px;
            	margin-left:-40px;

            } 
            .reload .icon{
            	
            	color:rgba(255, 255, 255, .35);
            }
            .reload .tipTxt{
            	font-size:15px;
            	padding-top:20px;
            	 word-break:break-all;
            	text-align: center;
            	color:#FFFFFF;
            }
              
            
             .dynamic_images .mui-progressbar-wrapper {  
                position:absolute;
                bottom:3px;
                height:6px;
                width:100%;
                padding:0 4px;
    
            }   
            
            .filePicker {	    	   
			    color: #CCC;
			    border: 1px dashed #949294;
			    width: 100%;  
                height: 100%;
                position:relative; 
                max-width: 7.6em;
                max-height: 7.6em;
			}
			.filePicker p {

				 margin:0 auto;
				 width:100%;
				 text-align: center;
				 vertical-align: middle;
				 line-height: 39px;
			
				 padding-top:20px;
				 padding-bottom: 20px;


			}
			
			
			.dynamic_images .statusTip  {  
 				position:absolute;					
			    height:20px;
			    width:20px;			
			    top: -2px;
			    right:5px;
			    text-align: center;
			}
			
			.statusTip .success{
				font-weight: 100;
				color:#26C281 ;
			}
			
			.statusTip .failed{
				color:#e35b5a ;
			}
			.statusTip .wait{
				color:#E9312F;
			}
            
			
			
			
			
			
		</style>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/jquery-1.12.4.min.js"></script>
		<script type="text/javascript">
			mui.init();
			
		</script>
	</head>  

	<body>
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">案件信息</h1>
			<button id='gallery' class=" mui-pull-right mui-btn-link" style="color:white;">相册</button>
		</header>
		<div class="mui-content">
		   	 <div id="audit_info" style="display:none;">
		   	 	<div class="mui-card" >
				<div class="mui-card-header mui-card-media">
				
					
					<div class="mui-media-body" style="margin-left: 0;overflow: hidden;">
						<div class="mui-pull-left">
							<span class="mui-icon mui-icon-contact" style="color:#F15A24"></span>
							<span id="audit_user"></span>
							<p>审核于 <span id="audit_time"></span></p>
						</div>
						<div class="mui-pull-right">
							<a  class="mui-icon mui-icon-phone" style="display: block; font-size:34px;line-height: 34px;color:#F15A24" id="audit_phone"  >
							
							</a>
							
						</div>
					</div>
					<!--<img class="mui-pull-left" src="../images/logo.png" width="34px" height="34px" />
					<h2>小M</h2>
					<p>发表于 2016-06-30 15:30</p>-->
				</div>
				<div class="mui-card-content" >
					<div style="padding:10px;">
						<ul class="mui-table-view car-list">
							<li class="mui-table-view-cell mui-media ">
									
									<div class="mui-media-body">
										
											<span class="color-orange icon-wrapper"><i class="fa fa-car" aria-hidden="true"></i></span>
											<span class="car-item-auto">车牌号:</span><span>新A262E0</span>
											<span class="car-item-price">定损金额:</span><span>20232</span>
										
									</div>
								
							</li>
							
							
						</ul>
						
					</div>
					<p style="padding:10px;" id="audit_content">
				
					</p>
					
				</div>
				
			</div>
		   	 	
		 </div>
		   
               <div class="dynamic_images">
               		<ul class="photo-list">  
                       
                   </ul>
                    <ul class="image-list">  
                        <li class="filePicker-wrapper">
                        	<div class="filePicker" id="pickFile">
                        		<p>
                        			<span class="mui-icon mui-icon-plusempty" style="font-size: 39px;"></span>
                        		</p>
                        		
                        	</div>
                       		
                        </li>
                        
                        
                        
                        
                     <!--  <li class='pickimg'>
                        	
                        	<img src='../../images/cbd.jpg' />
                        	<div class='mui-progressbar-wrapper'>
                        		<p  class='mui-progressbar mui-progressbar-royal' data-progress='80'>
                        			<span></span>
                        		</p>
                        	</div>
                        	<div class="image-cover">
                        		<div class="reload">
                        			
                        			<p class="tipTxt">
                        				失败！点击重传
                        			</p>
                        			
                        		</div>
                        		
                        	</div>
                        </li>-->
                    </ul>  
                </div> 
                
				<div class="mui-button-row">
						

				</div>
           
		</div>
		
		<nav class="mui-bar mui-bar-footer"  style="position:fixed;bottom:0;left:0;right:0;">
			
				  <div class="mui-row">  
			            <div class="mui-col-sm-6 mui-col-xs-6" style="padding:0 40px;">  
			                <button id="submitBtn" type="button" class="mui-btn mui-btn-block mui-btn-blue" data-loading-text = "上传中..." data-loading-icon=""><i class="fa fa-upload" style="margin-right:4px;" ></i>发送</button>
			            </div>  
			            <div class="mui-col-sm-6 mui-col-xs-6" style="padding:0 40px;">  
			               <button id="finish" type="button" class="mui-btn mui-btn-block mui-btn-danger"><i class='fa fa-check' style="margin-right:4px;"></i>完成</button>  
			            </div>  
			    </div>  			
		</nav>
		<!--<footer class="mui-bar mui-bar-footer-secondary ">
			<button id='submitBtn' class="mui-btn  mui-btn-primary">上传</button>
			<a href="#bottomPopover" class="mui-btn mui-btn-link mui-pull-right">菜单</a>
			
		</footer>-->
		<script src="../../js/app.js"></script>
		<script src="../../js/upimage.js"></script><br />
		<script src="../../js/mui.zoom.js">    </script>
    	<script src="../../js/mui.previewimage.js"></script>
    	<script src="../../js/dateutil.js"></script>
		<script type="text/javascript">
			
		
			 var preview = mui.previewImage();
		    
		    var ulWidth = $(".photo-list").width();
		    var liWidth = ulWidth/4;
		    $(".filePicker-wrapper").height(liWidth);
		    
		    
			var files = [];
			
			window.addEventListener("allFinish",function(){
				console.log("all finished");
				mui("#submitBtn").button('reset');
			});
			
			var fileTaskController = new FileTaskCtl();
			
			
            
             mui.plusReady(function() {
			 	
			 		var all = plus.webview.all();
								var current = plus.webview.currentWebview().id; 
								for(var i=0;i<=all.length -1 ; i++ ){ 
								        console.log(all[i].id);
								    
					} 
			 
			 		plus.navigator.setStatusBarBackground( "#F15A24" );
			 	 	var self = plus.webview.currentWebview();
					 CASE_UID = self.CASE_UID;
					 CASE_CODE = self.CASE_CODE;
					 
					 initCaseData(CASE_CODE);
					 
					document.getElementById("submitBtn").addEventListener("tap",function(){
						if(fileTaskController.getTaskCount() <=0){
							mui.toast('请先选择要上传的图片!');
		            		return false;
		            	}
						
						mui("#submitBtn").button('loading');
						upload(CASE_UID,CASE_CODE);
					});
					document.getElementById("pickFile").addEventListener("tap",function(){
//						showActionSheet();
						getImage();  
					});
					
					document.getElementById("gallery").addEventListener("tap",function(){
					
						galleryImgs();
					});
					
					document.getElementById("finish").addEventListener("tap",function(){
						if($(".image-list .pickimg").length <=0){
							mui.toast('请先选择图片,并上传!');
							return false;
						}
						
						
						
						app.changeSend(CASE_CODE,function(data){
							mui.back();
							
							
						},function(data){
							var result_code = data.result_code;
							if(result_code){
								if(data.result_code == -99 || data.result_code == -98){
									mui.toast('您尚未登录，请登录');
									mui.back();
								}else{
									mui.toast(data.message);
								}
							}
							else {
								mui.toast(data.message);
							}
							
						});
					});
					 	
			 });
            
            
			
			function showActionSheet() {  
                var bts = [{  
                    title: "拍照"  
                }, {  
                    title: "从相册选择"  
                }];  
                plus.nativeUI.actionSheet({  
                        cancel: "取消",  
                        buttons: bts  
                    },  
                    function(e) {  
                        if (e.index == 1) {  
                            getImage();  
                        } else if (e.index == 2) {  
                            galleryImgs();  
                        }  
                    }  
                );  
            };
            
            
            function galleryImgs() { // 从相册中选择图片  
            	
            	var user = app.getUserInfo();
            	console.log("--------------");
                plus.gallery.pick(function(e) {   
         			mui("#submitBtn").button('loading');
                    var ulEl = $(".dynamic_images .image-list");
                    var user = app.getUserInfo();
                    var fileExtra = {"CASE_CODE":CASE_CODE,"LOGIN_NAME":user.LOGIN_NAME,"TOKEN":user.TOKEN};
                    var resizeCount = 0;
                    for (var i = 0; i < e.files.length; i++) {  
                    	
                    	plus.io.resolveLocalFileSystemURL( e.files[i], function ( entry ) {
                    		
							entry.file(function(file){
							
							
								var itemProgressId = getUid();
			                        var appendContent = getPreviewHtml(itemProgressId,file.fullPath);       	
			                        
			                        ulEl.append(appendContent);
			                        
			                        resizeImage(file.fullPath,itemProgressId,function(resizeFile,elId,oldSrc){
			                        	   
			                        	   console.log(JSON.stringify(file));
			                        	   console.log(file.fullPath);
			                        	   var lastModifiedDate = file.lastModifiedDate;
			                        	 
			                        	    $("#" + elId + " img").attr("src",resizeFile);
			                        	    
			                        	    $("#" + elId + " img").attr("data-preview-src",resizeFile);
			                        	    $("#" + elId + " img").attr("data-preview-group","1");
			                        	    
			                        	    var fileOpt = $.extend(true, {}, fileExtra);
			                       			fileOpt["LAST_MODIFY"] = lastModifiedDate.pattern("yyyy-MM-dd HH:mm:ss");
			                        		var fileTaskItem = new  filetask(elId,resizeFile,fileOpt);
			                       	       fileTaskController.addTask(fileTaskItem);
			                       	       resizeCount ++ ;
			                       	       if(resizeCount == e.files.length){
			                       	       	 	 mui("#submitBtn").button('reset');
			                       	       	 	
			                       	       	 	preview = mui.previewImage();
			                       	       }
			                        });
			                        mui('#'+ itemProgressId + '_progress').progressbar().setProgress(0);                         
								
							});
						}, function ( e ) {
							console.log('error');
						} );
                    	
                    	 console.log(JSON.stringify(e.files[i]));
                    	
                    	
                        

                    }
                    
                   
                    
                   
                }, function(e) {  
                    console.log("取消选择图片");  
                }, {  
                    filter: "image",  
                    system:false,
                    multiple: true  
                });  
            } 
            
            
            
            //牌照选择
            function getImage() {  
                var cmr = plus.camera.getCamera();  
                var user = app.getUserInfo();
                cmr.captureImage(function(p) {  
                    plus.io.resolveLocalFileSystemURL(p, function(entry) { 
                    	mui("#submitBtn").button('loading');
                    	var fileExtra = {"CASE_CODE":CASE_CODE,"LOGIN_NAME":user.LOGIN_NAME,"TOKEN":user.TOKEN}
                    	var ulEl  =  $(".dynamic_images .image-list");
                        var localurl = entry.toLocalURL(); //  
                       
                        
                        entry.file(function(file){
                        	 var itemProgressId = getUid();
                        
	                        var appendContent = getPreviewHtml(itemProgressId,localurl);       	
	                        
	                        ulEl.append(appendContent);
	                        
	                         resizeImage(entry.toLocalURL(),itemProgressId,function(resizeFile,elId){
	                         	var lastModifiedDate = file.lastModifiedDate;
	                         	
                        	    $("#" + elId + " img").attr("src",resizeFile);
                        	    
                        	    $("#" + elId + " img").attr("data-preview-src",resizeFile);
                        	    $("#" + elId + " img").attr("data-preview-group","1");
                        	    
                        	    var fileOpt = $.extend(true, {}, fileExtra);
			                    fileOpt["LAST_MODIFY"] = lastModifiedDate.pattern("yyyy-MM-dd HH:mm:ss");
                        	    
                        	    
                        		var fileTaskItem = new  filetask(elId,resizeFile,fileOpt);
                       	       	fileTaskController.addTask(fileTaskItem);
                       	      	mui("#submitBtn").button('reset');
                       	      	preview = mui.previewImage();
                        	});
                        	
                        	mui('#'+ itemProgressId + '_progress').progressbar().setProgress(0);
                        	
                        });
                        
                       
                        
                        

                       	
//                     	var fileTaskItem = new  filetask(itemProgressId,localurl,fileExtra);
//                     	fileTaskController.addTask(fileTaskItem);
                        //$(".dynamic_images ul li").remove(".pickimg");                         
                            
                    });  
                });  
            } 
            
            
            
             function upload(uid,caseCode) {                             
            	
             	fileTaskController.startAll();                  
            }
           
            function bindDelBtn(){
            	$(".image-list").on("tap",".delbtn",function(e){
            		var itemId = $(this).closest("li").attr("id");
            		fileTaskController.removeFileTask(itemId,true);
            	});
            }
            
           
            bindDelBtn();
            
            mui.back = function(event){
            	
            	/*if($("image-list .pickimg").length <=0){
							mui.toast('请先选择图片,并上传!');
							return false;
				}*/
				
				if(preview && preview.isShown()){
					preview.close();
					return false;
				}
            	
            	
            	if(!fileTaskController.isAllFinished()){
            		mui.toast('您有尚未上传完成的任务!');
            		return false;
            	}
            	var all = plus.webview.all();
				var current = plus.webview.currentWebview().id;
				
				for(var i=0;i<=all.length -1 ; i++ ){ 
				        if(all[i].id != plus.webview.getLaunchWebview().id){
				        	all[i].close();
				        	
				        }

				} 
				plus.webview.getLaunchWebview().reload(true);
				
            }
            
            function fillPayList(payList){
            	var payListHtml = "";
            	for(var i=0;i<=payList.length-1;i++){
            		payListHtml += '<li class="mui-table-view-cell mui-media ">'+
									
										'<div class="mui-media-body">' +
											'<span class="color-orange icon-wrapper"><i class="fa fa-car" aria-hidden="true"></i></span>' +
											'<span class="car-item-auto">车牌号:</span><span>'+ payList[i].AUTO_NO +'</span>' +
											'<span class="car-item-price">定损金额:</span><span>'+payList[i].PAY_FEE +'</span>' + 
										
										'</div>' +
								
									'</li>';
            	}
            	$(".car-list").html(payListHtml);
            }
            function initCaseData(caseCode){
            	app.getCaseDetail(caseCode,function(result){
            		var result_code = result.result_code;
            		if(result_code == -99){
            			app.toLogin();
            		}
            		else if(result_code != 0){
            			 mui.toast('获取案件信息失败');
            		}else if(result_code == 0){
            			var result_data = result.result_data;
            			console.log(JSON.stringify(result_data.PHOTO_LIST));
            			if(result_data && result_data.PHOTO_LIST){
            				var photoList = result_data.PHOTO_LIST;
            				var ulEl  =  $(".dynamic_images .photo-list");
            				for(var i=0; i<=photoList.length-1; i++){
            					var flag  = photoList[i].FLAG;
            					var tipContent = "";
            					if(flag == "0"){
            						//tipContent = "<span class='wait'><i class='fa fa-clock-o'></i></span>";
            					}else if(flag == "1"){
            						tipContent = "<span class='success'><i class='fa fa-check-square'></i></span>";
            					}
            					else if(flag == "2"){
            						tipContent = "<span class='failed'><i class='fa  fa-window-close '></i></span>";
            					}
            					
            					var previewHtml = "";
            					if(photoList[i].SRC_PATH){
            						previewHtml = "<img src='" + app.SERVER_URL +  photoList[i].THUMB_PATH + "' data-preview-src='" + app.SERVER_URL + photoList[i].SRC_PATH+ "' data-preview-group='1'/> ";
            					}
            					else {
            						previewHtml = "<img src='" + app.SERVER_URL +  photoList[i].THUMB_PATH + "' data-preview-src='" + app.SERVER_URL + photoList[i].THUMB_PATH+ "' data-preview-group='1'/> ";

            					}
            					var li = $("<li class='pickimg'></li>");
            					li.height(liWidth);
            					var htmlContent = 
													"<div class='statusTip'>" + tipContent +"</div>"+
													  previewHtml;
													  
								li.html(htmlContent);	
							    ulEl.append(li.prop("outerHTML"));
            				}
            				
            				 preview = mui.previewImage();
            				
            			}
            			if(result_data){
            				var auditingFlag = result_data.AUDIT_FLAG;
            				var flag         = result_data.FLAG;
            				if(flag=="2" || flag=="5" || flag=="3" ){
            					$(".mui-bar-footer").hide();
            					$("#gallery").hide();
            					$("#pickFile").hide();           					
            				}
            				if(auditingFlag){
            					var auditUser = result_data.AUDIT_USER_INFO;
 
            					$("#audit_user").html(auditUser.NAME);
            					$("#audit_time").html(result_data.AUDIT_TIME);
            					$("#audit_content").html(result_data.AUDIT_DESC);
            					$("#audit_phone").attr("href","tel:"+auditUser.MOBILE);
            					
            					var payList = result_data.PAY_LIST;
            					if(payList){
            						fillPayList(payList);
            					}
            					$("#audit_info").show();
            				}
            				else {
            					$("#audit_info").hide();
            				}
            				
            			}
            		}
            		
            	});
            }
            
			
		</script>

	</body>


</html>    